<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        body {
            background-image: url("/images/register-background.png");
            background-repeat: no-repeat;
            background-size: cover;
        }

        form {
            margin-top: 10%;
            margin-left: 20%;
            background-image: url("/images/register.png");
            background-repeat: no-repeat;
            background-size: cover;
            width: 833px;
            height: 412px;
            padding-top: 20px;
        }

        input {
            height: 30px;
            width: 300px;
            font-size: 20px;
            outline: none;
        }

        input:hover {
            border: 2px solid blue;
        }

        input:focus {
            border: 2px solid blue;
        }

        h1 {
            margin-left: 620px;
        }

        p {
            margin-left: 500px;
        }

        .register {
            margin-top: 40px;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
<form th:action="@{/register}" id="registerForm" method="post">
    <h1>注册</h1>
    <p>
        <button type="button">用户名</button>
        <br>
        <input type="text" name="username" id="username" />
        <br>
        <span id="usernameError"></span>
    </p>

    <p>
        <button type="button">密码</button>
        <br>
        <input type="password" name="password" id="password" />
        <br>
        <span id="passwordError"></span>
    </p>
    <p class="register"><input type="submit" value="注册"/></p>
</form>
<script>
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var registerForm = document.getElementById('registerForm');
    var usernameError = document.getElementById('usernameError');
    var passwordError = document.getElementById('passwordError');
    registerForm.addEventListener('submit', function (event) {
        event.preventDefault();
        usernameError.textContent = '';
        passwordError.textContent = '';
        if (username.value === '') {
            usernameError.textContent = '用户名不能为空';
            usernameError.classList.add('error');
            return;
        }
        if (password.value === '') {
            passwordError.textContent = '密码不能为空';
            passwordError.classList.add('error');
            return;
        }
        this.submit();

    })
</script>
</body>
</html>